<template>
	<div class="test_paper_chapter">
		<div class="paper-header">
			<h4>章节设置</h4>
			<p v-html="`试卷总分：<font color='#930b0b'>${totalScore}</font> 分`"></p>
			<el-button type="text" icon="el-icon-plus" @click="handleAddedChapter()">添加章节</el-button>
		</div>
		<el-scrollbar ref="chapterListRef">
			<el-card v-for="(item, index) in chapterArrays" :key="item.id || item.mark" :data-id="item.id || item.mark" shadow="hover">
				<template slot="header">
					<div class="chapter_header">
						<h4 class="handle">章节名称</h4>
						<div class="text"><el-input size="small" v-model="item.title" clearable placeholder="请输入章节名称" /></div>
						<div class="button">
							<el-button v-if="type === '1'" type="text" icon="el-icon-sw-select" @click="handleSelectSubject(item)">选择试题</el-button>
							<el-button type="text" icon="el-icon-delete" :disabled="isDisabled" @click="handleDeleteChapter(index)">删除</el-button>
						</div>
					</div>
					<div class="chapter_describe">
						<h4 class="handle">章节描述</h4>
						<div class="text"><el-input size="small" v-model="item.des" clearable placeholder="请输入章节描述" /></div>
						<div class="score" v-if="type === '1'">
							<el-input size="small" v-model="item.setScore" :disabled="item.testSubjectVO.length === 0">
								<el-button size="small" slot="append" @click="handleBatchSetting(item)">批量设置</el-button>
							</el-input>
						</div>
					</div>
				</template>
				<subject-body v-model="item.testSubjectVO" :type="type"></subject-body>
			</el-card>
		</el-scrollbar>
	</div>
</template>

<script>
	import lodash from 'lodash';
	import Sortable from 'sortablejs';
	import subjectBody from './subject';
	export default {
		components: { subjectBody },
		props: {
			value: { type: Array, default: () => [] },
			totalScore: { type: Number, default: 0 },
			type: { type: String, default: '' }
		},
		data() {
			return {
				chapterArrays: this.value,
				chapterSortable: null
			};
		},
		computed: {
			isDisabled() {
				return this.chapterArrays.length === 1;
			}
		},
		watch: {
			value(arr) {
				this.chapterArrays = arr;
			},
			chapterArrays: {
				handler(arr) {
					this.$emit('input', arr);
				},
				deep: true
			}
		},
		mounted() {
			this.$bus.$on('checkedSubject', (arr, id) => {
				let chapter = this.chapterArrays.find((item) => {
					return id === (item?.id || item.mark);
				});
				let subjects = arr.map((n, i) => {
					return { id: n.id, orderBy: i + 1, score: '10', testSubjects: n };
				});
				this.$set(chapter, 'testSubjectVO', subjects);
			});
			this.$nextTick(() => {
				let ele = this.$refs['chapterListRef'].$refs['resize'];
				this.chapterSortable = Sortable.create(ele, {
					animation: 150,
					handle: '.handle',
					onEnd: this.refreshChapterSort
				});
			});
		},
		destroyed() {
			this.$bus.$off('checkedSubject');
		},
		methods: {
			//新增章节
			handleAddedChapter() {
				let lastObject = lodash.last(this.chapterArrays);
				if (!lastObject.title) {
					this.$message.warning('章节名称未填写');
				} else {
					let mark = this.$genUUID();
					let sorts = this.chapterArrays.map((n) => Number(n.orderBy));
					let obj = { title: '', des: '', testSubjectVO: [], mark, score: 1 };
					if (this.type === '2') obj['batchScore'] = 1;
					this.chapterArrays.push({ ...obj, orderBy: lodash.maxBy(sorts) + 1 });
				}
			},

			//删除试卷章节
			handleDeleteChapter(index) {
				this.chapterArrays.splice(index, 1);
			},

			//选在试题
			handleSelectSubject(data) {
				this.$bus.$emit('selectSubject', data);
			},

			//批量设置分数
			handleBatchSetting(data) {
				let subjects = data.testSubjectVO || [];
				subjects.forEach((item) => {
					item.score = data.setScore;
				});
			},

			//刷新章节排序
			refreshChapterSort(evt) {
				let sortedIds = this.chapterSortable.toArray();
				this.chapterArrays = sortedIds.map((id) => {
					return this.chapterArrays.find((n) => {
						return id === (n?.id || n.mark);
					});
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.test_paper_chapter::v-deep {
		display: flex;
		flex-direction: column;
		border-right: solid 1px #e4e7ed;
		overflow: hidden;
		flex: 1;

		.paper-header {
			display: flex;
			align-items: center;
			border-bottom: solid 1px #e4e7ed;
			padding: 0 10px 0 16px;
			font-size: 15px;
			flex-shrink: 0;

			p {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			font {
				margin-right: 4px;
				font-weight: bold;
			}

			.el-button {
				margin-left: auto;
			}
		}

		.el-scrollbar {
			flex: 1;
			overflow: hidden;
		}

		.el-scrollbar__view {
			padding: 16px;
		}

		.el-card {
			margin-top: 16px;

			&:first-child {
				margin-top: 0;
			}
		}

		.el-card__header {
			padding: 0;
		}

		.el-card__body {
			padding: 10px;
		}

		.el-empty {
			margin: 10px auto;
		}
	}

	.chapter_header,
	.chapter_describe {
		display: flex;
		align-items: center;
		padding: 10px;

		.text {
			flex: 1;
			margin-left: 10px;
			overflow: hidden;
		}

		.handle {
			cursor: move;
			flex-shrink: 0;
		}

		.score,
		.button {
			flex-shrink: 0;
			overflow: hidden;
			margin-left: 10px;
		}

		.score {
			width: 136px;
		}
	}

	.chapter_header {
		background-color: var(--primary-background-active);

		.handle {
			color: #fff;
		}

		.el-button {
			color: #fff;
			padding: 8px 0;

			&:hover {
				opacity: 0.8;
			}
		}
	}

	.chapter_describe {
		background-color: #f2f6fc;

		.el-input.score {
			flex-shrink: 0;
		}

		.el-input.score::v-deep {
			width: 136px;
			font-family: Arial, Helvetica, sans-serif;

			.el-input__inner {
				font-size: 14px;
				text-align: center;
			}
		}

		.el-button {
			padding: 9px;
		}
	}
</style>